<template>
  <div>
    {{ $router.currentRoute._rawValue.params.id }}
  </div>
  <div>
    <ul>
      <li v-for="item in msg" :key="item.id">
        <router-link :to="`/home/msg/detail/${item.id}`">{{
          item.title
        }}</router-link>
      </li>
    </ul>
  </div>

  <hr />
  <router-view :msg="$router.currentRoute._rawValue.params.id"></router-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const msg = [
      {
        id: 1,
        title: "oo1",
        contend: "hah1"
      },

      {
        id: 2,
        title: "oo2",
        contend: "hah2"
      },

      {
        id: 3,
        title: "oo1",
        contend: "hah3"
      }
    ];

    return {
      msg
    };
  }
});
</script>

<style scoped></style>
